import { Button, Checkbox, Form, Input } from "antd";
import styles from "./index.module.scss";
import bgImg from "@/assets/images/test.png";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { login } from "@/request/api";

export default function Login() {
  const onFinish = (values: any) => {
    login({ email: values.email, password: values.password }).then(
      (res: any) => {
        //     if (res.code === 200) {
        localStorage.setItem("lanmei_token", res.token);
        location.href = "/";
        //     } else {
        //       message.error(res.msg);
        //     }
      }
    );
  };

  return (
    <div className={styles.loginStyle}>
      <img className={styles.bgImg} src={bgImg} />
      <div className={styles.innerContent}>
        <div className={styles.title}>SING IN</div>
        <div className={styles.formBox}>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              name="email"
              rules={[{ required: true, message: "Please input your Email!" }]}
            >
              <Input
                prefix={
                  <UserOutlined
                    style={{ color: "#778289", marginRight: "10px" }}
                  />
                }
                placeholder="Email"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                { required: true, message: "Please input your Password!" },
              ]}
            >
              <Input
                prefix={
                  <LockOutlined
                    style={{ color: "#778289", marginRight: "10px" }}
                  />
                }
                type="password"
                placeholder="Password"
              />
            </Form.Item>

            <Form.Item>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div>
                  <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox style={{ color: "#1677ff" }}>
                      Remember me
                    </Checkbox>
                  </Form.Item>
                </div>

                <a href="">Forgot password?</a>
              </div>
            </Form.Item>

            <Form.Item>
              <Button
                className={styles.loginBtn}
                type="primary"
                htmlType="submit"
              >
                Sing in
              </Button>
              <div style={{ textAlign: "center", marginTop: "20px" }}>
                <a href="">Don't have an account yet? Sign up</a>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}
